<template>
<div class="border-1 bg-0 border-r center" v-if="joinShow" style="width:68%"  ref="container">
  <div class="text-r" style="margin:20px 20px 0 0"><img src="../../assets/icon/x.svg" alt="" @click="centershow " ></div>
  <div class="text-c fontW-7 font-30 color-f  mgb-20">{{$t('buypage.join')}} Joha bro {{$T('buypage.bulk')}}</div>
  <div style="margin:0 5% 5%">
    <div class="flex">
      <div class="flex-dc-s-between mgr-20" style="width:60%">
      <div class="flex-s-between " style="width:100%">
        <div style="width:25%"><img src="../../assets/img/tx1.svg" alt="" style="width:100%"></div>
        <div class="flex-dc-s-al mgl-10">
        <div class="font-25 fontW-7 color-f">Joha bro</div>
        <div class="font-14 fontW-7 color-af47">0x642a...fc2e</div>
      </div>
     <img src="../../assets/icon/broker.svg"  style="margin-bottom:20px" alt="">
      </div>
      <div style="width:80%">
        <div class="flex-s-between ">
         <div class="font-16 fontW-7 color-f flex">{{$t('buypage.total_number')}}<div>120</div></div>
         <div class="text-r font-15 fontW-7 color-f">67%</div>
        </div>
        <el-progress :percentage="67"  :stroke-width="13" :show-text="false" color="#fe66c4"></el-progress>
       <div class="font-15 fontW-7 color-f text-c">{{$t('buypage.complete_deg')}}</div>
      </div>
      </div>
      <div class="flex " style="width:92%">
            <div style="width:45%" ><img src="../../assets/img/sell.jpg" alt="" style="width:100%"></div>
            <div class="flex-dc-s-al mgl-20" style="width:64%">
              <div>
                <p class="font-30 fontW-9 color-af47">Super shoe</p>
                <p class="font-26 fontW-9 color-af47">#3461</p>
              </div>
              <div>
                <p class="font-20 fontW-7 color-fe50">{{$t('buypage.groupBuyPrice')}}<img style="width:20px;margin-bottom:5px" class="mgr-10" src="../../assets/ETH/IMEETNFT.svg" alt=""></p>
                <p class="font-36 fontW-7 color-f">298.32</p>
              </div>
            </div>
      </div>
      <div class="flex-dc-s-between ">
            <p class="font-20 fontW-7 color-f text-c mgtb-10">{{$t('buypage.groupTips')}}</p>
            <div class="flex-n-center">
           <div style="width:35%" class="flex bg-f border-r pdlr-10">
              <el-input v-model="input1" placeholder="0.05" style="width:80%" class="font-25 fontW-7"></el-input>
              <div class="font-25 fontW-7 color-0 h-40">{{$t('detail.percent')}}</div>
           </div>
              <div class="font-25 fontW-7 color-f mlr-20">≈</div>
              <div style="width:40%"><el-input v-model="input2" placeholder="100" class="font-25 fontW-7"></el-input></div>
            </div>
            <div class="flex-n-center mgt-5">
              <div style="width:35%" class="flex bg-f border-r pdlr-10 opacity-0">
              <el-input v-model="input1" placeholder="0.05" style="width:80%" class="font-25 fontW-7"></el-input>
              <div class="font-25 fontW-7 color-0 h-40">%</div>
            </div>
              <div class="font-25 fontW-7 color-f mlr-20">≈</div>
              <div class="font-14 fontW-7 color-f flex-s-between" style="width:40%"><div >ETH</div><div>0.23</div></div>
            </div>
          <el-button type="primary" style="width:92%;border:0" class="bg-ffc4 color-f font-f-ib font-26 fontW-7 btnHove border-r" >{{$t('btn.openSell')}}</el-button>

       </div>
    </div>
    <div class="border-1 border-r mgt-50 joinbox" >
    <div class="header font-25 font-f-ib fontW-7 color-f bd-b-1 h-40 flex">
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">
        <div style="margin: 0 20%;">{{$t('detail.user')}}</div>
      </div>
      <div class="text-r font-25 font-f-ib fontW-7 flex-1">
        <div style="margin: 0 30% 0 0;">{{$t('buypage.role')}}</div>
      </div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('detail.add')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1">{{$t('buypage.participation')}}</div>
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">{{$t('detail.time')}}</div>
    </div>
    <div class="item color-f font-20 h-3 mgtb-10 flex" v-for="item in joinData" :key="item.id">
      <div class="flex-1">
        <div style="margin: 0 5%;"><img :src="item.img_url" alt="" class="mar-10"> {{item.name}}</div>
      </div>
      <div class="flex-1 text-r"><div style="margin: 0 30% 0 0;"> {{item.offer}}</div></div>
      <div class="color-af47 flex-1 text-c">{{item.address}}</div>
      <div class="color-f flex-1 text-c">{{item.Participation}}</div>
      <div class="flex-1">{{item.time}}</div>
    </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  props: ['joinData'],
  data () {
    return {
      input1: '',
      input2: '',
      joinShow: false
    }
  },
  mounted () {
    this.$EventBus.$on('joinbus', (msg) => {
      this.joinShow = msg
    })
    document.addEventListener('click', this.cancelpop)
  },
  methods: {
    centershow: function () {
      this.joinShow = false
    },
    // 点击弹窗外取消弹窗
    cancelpop: function (e) {
      if (this.joinShow === true) {
        let tree = this.$refs.container
        if (tree) {
          if (!tree.contains(e.target)) {
            // this.joinShow = false
          }
        }
        console.log(this.joinShow)
      }
    }
  },
  beforeDestroy() {
    this.$EventBus.$off('joinbus')
    document.removeEventListener('click', this.cancelpop)
  }
}
</script>
<style lang="less"  scoped>

/deep/.el-input__inner{
  padding:0;
  border: none;
  text-align: right;
  padding-right: 10px;
}
/deep/.el-slider__runway{
  margin: 0;
  // background: #fe66c4;
  .el-slider__bar,.el-slider__button{
    background: #fe66c4;
  }
}
/deep/.el-button--primary:focus,.el-button--primary:hover {
  background: #fe66c4;
  color: #fff;
  border: 0;
}
.joinbox{
  height: 270px;
  overflow-y: auto;
}
</style>
